@charset "utf-8";
$color: #af1730;
html,body{min-width: 1200px;}
.web {
    width: 100%;
    //中英文切换弹窗
    .language-cut{
        display: none;
        position: fixed;
        top: 0;
        z-index: 9999999;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        .cut-btn{
            width: 610px;
            margin: 160px auto;
            height: 314px;
            background: #fff;
            padding-top: 37px;
            >p{
                font-size: 23px;
                color: #666;
                padding: 0 36px;
                margin-bottom: 33px;
            }
            >div{
                width: 470px;
                margin: 0 auto;
                font-size: 0;
                .yes,.no{
                    display: inline-block;
                    width: 138px;
                    margin: auto;
                    height: 38px;
                    line-height: 38px;
                    border: 1px solid #787878;
                    text-align: center;
                    color: #2e2e2e;
                    border-radius: 5px;
                    box-shadow: 1px 2px 5px #2E2E2E;
                    -webkit-box-shadow: 1px 2px 5px #2E2E2E;
                    font-size: 15px;
                    cursor: pointer;
                    &:hover{
                        box-shadow: 1px 2px 10px #2E2E2E;
                        -webkit-box-shadow: 1px 2px 10px #2E2E2E;
                    }
                }
                .yes{
                    margin-right: 180px;
                }
            }
            
            
        }
    }
    .web_box {
        width: 1200px;
        margin: 0 auto;
        //头部
        header {
            padding-top: 56px;
            position: relative;
            z-index: 999;
            .logo {
                width: 153px;
                height: 89px;
                margin: 0 auto;
                margin-bottom: 142px;
            }
            .navigation {
                text-align: center;
                font-size: 0;
                .bar_box {
                    display: inline-block;
                    box-shadow: 0 -10px 30px rgba(175, 23, 48, .5);
                    .bar {
                        width: 170px;
                        display: inline-block;
                        white-space: nowrap;
                        padding: 42px 0 27px;
                        position: relative;
                        background: #fff;
                        .bar_img {
                            display: inline-block;
                            width: 40px;
                            height: 32px;
                        }
                        >span {
                            width: 100%;
                            height: 100%;
                            display: block;
                            margin-top: 20px;
                            color: #000000;
                            font-size: 16px;
                            cursor: default;
                        }
                        .bar_info {
                            position: absolute;
                            top: 150px;
                            left: 50%;
                            transform: translateX(-50%);
                            background: #ffffff;
                            font-size: 14px;
                            width: 134px;
                            display: none;
                            >ul {
                                background: #fff;
                                >li {
                                    position: relative;
                                    >a {
                                        line-height: 40px;
                                        text-indent: 4px;
                                        display: block;
                                        color: #999;
                                    }
                                    &:not(:last-child)::after {
                                        content: "";
                                        width: 100%;
                                        height: 1px;
                                        background: #e5e5e5;
                                        position: absolute;
                                        left: 0;
                                        bottom: 0;
                                    }
                                    &:hover >a {
                                        color: $color;
                                    }
                                }
                                li{
                                    .product-detail{
                                        display: none;
                                        position: absolute;
                                        top: 0;
                                        left: -260px;
                                        width: 245px;
                                        background: #fff;
                                        border-right:15px solid  rgba(200,200,200,0.1);
//                                      z-index: 99999;
                                        .product-img{
                                            vertical-align: top;
                                            display: inline-block;
                                            width: 45px;
                                            height: 82px;
                                            overflow: hidden;
                                            margin-top: 98px;
                                            img{
                                                width: 100%;
                                            }
                                        }
                                        .product-desc{
                                            display: inline-block;
                                            width: 150px;
                                            overflow: hidden;
                                            margin-left: 16px;
                                            >h4{
                                                width: 100%;
                                                white-space: normal;
                                                text-align: left;
                                                padding: 25px 0;
                                            }
                                            >p{
                                                width: 100%;
                                                white-space:normal;
                                                text-align: left;
                                                color: #999;
                                                padding-bottom: 50px;
                                            }
                                        }
                                    }
                                    .product-list{
                                        display: none;
                                        position: absolute;
                                        top: 0;
                                        left: 134px;
                                        width: 200px;
                                        background: #fff;
                                        text-align: left;
                                        border-left:15px solid  rgba(200,200,200,0.1);
//                                      z-index: 99999;
                                        ul{
                                            li{
                                                padding-left: 20px;
                                                height: 40px;
                                                line-height: 40px;
                                                color: #999;
                                                border-bottom: 1px solid #d0d0d0;
                                                a{
                                                    color: #999999;
                                                }
                                            }
                                            li:hover a{
                                                color: $color;
                                            }
                                        }
                                    }
                                }
                                li:hover .product-detail,
                                li:hover .product-list{
                                    display: block;
                                }
                            }
                            &::before {
                                content: "";
                                position: absolute;
                                border-bottom: 9px solid #ffffff;
                                border-left: 9px solid transparent;
                                border-right: 9px solid transparent;
                                left: 50%;
                                transform: translateX(-50%);
                                top: -8px;
                            }
                        }
                        &:not(:last-child)::after {
                            content: "";
                            height: 100%;
                            width: 1px;
                            background: #e5e5e5;
                            position: absolute;
                            right: 1px;
                            top: 0;
                        }
                        &:hover {
                            transform: scale(1.1);
                            >p {
                                color: $color;
                            }
                        }
                        &:hover .bar_info {
                            display: block;
                        }
                    }
                }
            }
            .language {
                width: 102px;
                height: 22px;
                position: absolute;
                right: 0;
                top: 230px;
                font-size: 0;
                span {
                    display: inline-block;
                    font-size: 14px;
                    color: #999999;
                    text-indent: 10px;
                    position: relative;
                    cursor: pointer;
                    &:first-child::after {
                        content: "";
                        position: absolute;
                        width: 1px;
                        height: 100%;
                        background: #999999;
                        right: -5px;
                        top: 0;
                    }
                    &:hover {
                        color: $color;
                    }
                }
                span.light{
                    color: $color;
                }
            }
            .bar_bottom{
                height: 102px;
                margin-top: -95px;
                background: $color;
            }
        }
        .title {
            width: 100%;
            background: $color;
            padding: 31px 0 27px;
            text-align: center;
            color: #fff;
            h2 {
                font-size: 41px;
                line-height: 52px;
            }
            p {
                font-size: 14px;
            }
        }
    }
    footer {
        width: 100%;
        background: $color;
        height: 200px;
        .partner{
            width: 1200px;
            margin: 0 auto;
            text-align: right;
            padding-top: 12px;
            >a:first-child{
                padding-right: 36px;
            }
            >a:last-child{
                padding-right: 62px;
            }
        }
        .copyright{
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            margin-top: 16px;
            p{
                line-height: 28px;
                color: #efdcde;
            }
        }
    }
}


/*
 *  图片垂直对齐  
 */

.img_valign {
    overflow: hidden;
    img {
        width: 100%;
        vertical-align: middle;
    }
}


/*
 *  图片水平对齐  
 */

.img_talign {
    overflow: hidden;
    text-align: center;
    img {
        height: 100%;
    }
}

.trsition_3 {
    transition: all .1s ease-in-out;
}